@import 'common.scss';

@font-face {
    font-family: 'pangmen';
    src: url('../font/pangmen.otf');
}

.layout {
    img {
        display: block;
    }

    .back-btn {
        width: 0.72rem;
        height: 0.37rem;
        margin-right: auto;
        margin-bottom: 0.13rem;
    }

    .total-score {
        width: 1.17rem;
        height: 0.37rem;
        margin-bottom: 0.07rem;
    }

    .score {
        font-family: 'pangmen';
        text-shadow: 0px 0.07rem 0.06rem rgba(55, 12, 0, 0.71);
        -webkit-text-stroke: 0.04rem #FFFFFF;
        font-size: 1.27rem;
        color: #BF0D0D;
        margin-bottom: 0.1rem;
        line-height: 0.93rem;
    }

    .progress-box {
        width: 100%;
        padding: 0 0.1rem;
        position: relative;

        .line {
            width: 2.11rem;
            height: 2.17rem;
            position: absolute;
            top: 0.3rem;
            left: 0.65rem;
        }

        .game2 {
            .project-img {
                position: absolute;
                right: 0;
            }
            .game2-score-box {
                position: absolute;
                right: 1.5rem;
                img {
                   position: absolute;
                   top: 0.2rem; 
                }
            }
        }

        .game3 {
            top: 0.85rem;
            .project-img {

            }
        }

        .gift-box {
            bottom: 0.25rem;
        }

        .progress-item {
            position: relative;
            font-size: 0.2rem;

            .color-red {
                top: -0.15rem;
                left: 0;
                font-size: 0.2rem;
                color: #BF0D0D;
            }

            .score-box {
                position: absolute;
                top: 25%;
                left: 0.65rem;
                img {
                    width: 1.1rem;
                    height: 0.2rem;
                }
            }

            span {
                position: absolute;
                font-size: 0.16rem;
                white-space: nowrap;
                color: #A0A0A0;
            }

            &:nth-of-type(1) {
                span {
                    // left: 0;
                    top: -0.25rem;
                    // color: #BF0D0D;
                }
            }

            &:nth-of-type(2) {
                span {
                    // right: -0.05rem;
                    // top: 0.25rem;
                }
            }

            &:nth-of-type(3) {
                span {
                    position: relative;
                    top: -0.05rem;
                }
            }

            &:nth-of-type(3) {
                .icon {
                    width: 0.57rem;
                    height: 0.34rem;
                    position: absolute;
                    top: 1rem;
                    left: 0.25rem;
                }

                .proigress-bottom-box {
                    position: absolute;
                    text-align: left;
                    bottom: 0.1rem;
                    left: 0.85rem;

                    img {
                        width: 0.78rem;
                        height: 0.27rem;
                    }
                }
            }

            .project-img {
                width: 0.65rem;
                height: 0.65rem;
            }

            .grey-box {
                width: 0.92rem;
                height: 0.94rem;
                position: absolute;
                top: 1.25rem;
                right: 0.25rem;
            }

            .progress-text-img {
                width: 0.81rem;
                height: 0.25rem;
                // position: absolute;
                // right: 0;
                // top: 0.55rem;
            }

            .text-box {
                position: absolute;
                right: 0.35rem;
                top: 2.15rem;

                .progress-desc {
                    span {
                        letter-spacing: -0.01rem;
                        color: #BF0D0D;
                        position: relative;
                    }
                }
            }
        }
    }
}